<!DOCTYPE html>
{% include 'navbar.html' %}
<html lang="en">
<head>
    <style>
        body {
            font-family: "Segoe UI";
            background: rgb(237, 238, 239);
        {#background: linear-gradient(0deg, rgba(44, 255, 210, 0.92) 0%, rgba(69, 165, 195, 0.92) 55%) no-repeat fixed;#}
        }

        .form-group {
            padding-bottom: 10pt;
        }

        .form_room {
            border-radius: 25pt;
            background-color: rgba(255, 255, 255, 0.6);
            padding: 15pt 15pt 20pt;

        }

        .row {
            padding-left: 20pt;
        }

        .col-md-8 {
            border-radius: 12pt;
            background-color: rgba(255, 255, 255, 0.6);
        }

        .col-md-4 {

        }

        h1 {
            color: whitesmoke;
        }
    </style>
    <title>Edit Room</title>
</head>
<body onload="sort_index()">
<div class="container">
    <div class="row justify-content-center">
        <div>
            <h1 class="mt-2" style="color: rgb(54,151,212)">Edit room</h1>
            <hr class="mt-0 mb-4">

        </div>
    </div>
</div>

{% block naglowek %}
{% endblock %}

<div class="row col-md-12">
    <div class="col-md-6" style="margin-right: auto;margin-left: auto">
        <form class="form_room">
            {% if err %}
                <p class="text-danger">{{ err }}</p>
            {% endif %}
            {% csrf_token %}
            <div class="form-group">
                <label style="color: black" for="name">Name of room</label>
                <input type="text" class="form-control" id="name" aria-describedby="emailHelp"
                       placeholder="Enter name of room" name="name" value="{{ RoomEdit.name }}">
            </div>
            <div class="form-group">
                <label style="color: black" for="number">Number of room</label>
                <input type="number" class="form-control" id="number" aria-describedby="emailHelp"
                       placeholder="Enter room number as number" name="number" min="0" value="{{ RoomEdit.number }}">
                {% if msg %}
                    <p class="text-danger">{{ msg }}</p>
                {% endif %}
            </div>
            <div class="form-group">
                <label for="type">Type Room</label>
                <select class="form-control" onchange="onChangeType()" id="type" name="type">
                    {% for type in all_types %}
                        {% if type.name == RoomEdit.type.name %}
                            <option id="{{ type.id }}" selected="selected">{{ type.name }}</option>
                        {% else %}
                            <option id="{{ type.id }}">{{ type.name }}</option>
                        {% endif %}
                    {% endfor %}
                </select>
            </div>
            <div class="form-group" style="margin-left: auto;margin-right: auto">
                <label style="color: black" for="price">Total price for night in room</label>
                <input type="number" class="form-control" id="price" placeholder="Enter price as number"
                       name="price" min="1" value="{{ RoomEdit.price }}" onchange="onChangeType()">
            </div>
            <div class="form-group">
                <label style="color: black" for="description">Short description of room</label>
                <textarea type="text" class="form-control" id="description" placeholder="Enter description of room"
                          name="description">{{ RoomEdit.description }}</textarea>
            </div>
            <button type="submit" class="btn btn-light" formmethod="post" formaction="/room/edit/{{ RoomEdit.id }}/">
                Update room
            </button>
        </form>
    </div>
    {#    <div class="col-md-8">#}
    {#        <table class="table">#}
    {#            <thead class="thead-light" style="color: black">#}
    {#            <tr>#}
    {#                <th scope="col">#</th>#}
    {#                <th scope="col">Number</th>#}
    {#                <th scope="col">Name</th>#}
    {#                <th scope="col">Description</th>#}
    {#                <th scope="col">Price</th>#}
    {#                <th scope="col">Type</th>#}
    {#                <th scope="col">Actions</th>#}
    {#            </tr>#}
    {#            </thead>#}
    {#            <tbody>#}
    {#            {% for room in all_rooms %}#}
    {#                <tr>#}
    {#                    <th scope="row" class="lp"></th>#}
    {#                    <td style="color: black;">{{ room.number }}</td>#}
    {#                    <td style="color: black;">{{ room.name }}</td>#}
    {#                    <td style="color: black;">{{ room.description }}</td>#}
    {#                    <td style="color: black;">{{ room.price }}</td>#}
    {#                    <td style="color: black;">{{ room.type.name }}</td>#}
    {#                    <form style="display: inline;">{% csrf_token %}#}
    {#                        <td>#}
    {#                            <button type="submit" class="btn btn-light" formmethod="post"#}
    {#                                    formaction="/room/delete/{{ room.id }}/">Delete#}
    {#                            </button>#}
    {#                            <button type="submit" class="btn btn-light" formmethod="post"#}
    {#                                    formaction="/room/edit/{{ room.id }}/">Edit#}
    {#                            </button>#}
    {#                        </td>#}
    {#                    </form>#}
    {#                </tr>#}
    {#            {% endfor %}#}
    {#            </tbody>#}
    {#        </table>#}
    {#    </div>#}

</div>
<script>
    function sort_index() {
        var index = 1;
        var lp = document.getElementsByClassName('lp');
        for (var i = 0; i < lp.length; i++) {
            lp[i].innerHTML = index;
            index++;
        }
    }

    function onChangeType() {
        console.log(document.getElementById("type").value);
        arr = [];
        arr1 = [];
        {% for type in all_types %}
            arr.push("{{ type.name }}");
            arr1.push({{ type.multiplier }});
        {% endfor %}
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] === document.getElementById("type").value) {
                document.getElementById("multiplier").value = arr1[i];
                document.getElementById("price").value = parseInt(arr1[i] * document.getElementById("defaultprice").value);
            }
        }
        {#if({{ type.name }}==document.getElementById("type").value){#}
        {#            console.log({{ type.name }})#}
        {#    }#}
    }
</script>
</body>
</html>